<template>
  <sz-Exhibition :code="code" :title="title" :data="data">
    <div slot="controller">功能暂定 ...</div>
     <sz-Slide @direction="direction">
      <div style="width:400px;height:300px;background-color:green;">
        尽情的滑动吧~
      </div>
    </sz-Slide>
  </sz-Exhibition>
</template>

<script>
export default {
  data() {
    return {
      title: "sz-Slide-滑动检测",
      // 轮播图数据
      images: [
        {
          src: "http://www.shuyuhng.top:9999/img/aa.bdab5332.jpg"
        },
        {
          src: "http://www.shuyuhng.top:9999/img/aa.bdab5332.jpg"
        },
        {
          src: "http://www.shuyuhng.top:9999/img/aa.bdab5332.jpg"
        },
        {
          src: "http://www.shuyuhng.top:9999/img/aa.bdab5332.jpg"
        }
      ],
      code: `
<template>
   <sz-Slide @direction="direction">
      <div style="width:700px;height:400px;background-color:green;">
      </div>
    </sz-Slide>
</template>

<js>
export default {
 methods: {
    direction(direction) {
      switch (direction) {
        case "left":
          console.log("左滑");
          break;
        case "right":
          console.log("右滑");
          break;
        case "up":
          console.log("上滑");
          break;
        case "down":
          console.log("下滑");
          break;
        default:
          break;
      }
    },
  }
};
</j's>
      `,
      data: [
        {
          title: "属性",
          tableKey: [
            {
              name: "参数",
              key: "param"
            },
            {
              name: "说明",
              key: "explain"
            },
            {
              name: "选填",
              key: "optional"
            },
            {
              name: "类型",
              key: "type"
            },
            {
              name: "可选值",
              key: "selval"
            },
            {
              name: "默认值",
              key: "default"
            },

          ],
          table: [
            {
              param: 'sensitivity',
              explain: '灵敏度 例如检测滑动20px',
              optional: '否',
              type: 'Number/String',
              selval: '----',
              default: 40
            },
          ]
        },
        {
          title: "slot插槽",
          tableKey: [
            { name: "插槽名称", key: "name" },
            { name: "说明", key: "explain" }
          ],
          table: [
            {
              name: "default",
              explain: "默认内部"
            },
          ]
        },
        {
          title: "事件",
          tableKey: [
            { name: "方法名称", key: "name" },
            { name: "说明", key: "explain" },
            {name:'返回值',key:"returnval"}
          ],
          table: [
            {
              name: "direction",
              explain: "检测滑动的方向",
              returnval:"direction(direction) {} / String"
            },
            {
              name: "move",
              explain: "滑动的关键数据",
              returnval:"move(moveData) {} / Object"
            },
          ]
        }
      ]
    };
  },
  methods: {
    direction(direction) {
      switch (direction) {
        case "left":
          alert('左滑')
          console.log("左滑");
          break;
        case "right":
          alert('右滑')
          console.log("右滑");
          break;
        case "up":
          alert('上滑')
          console.log("上滑");
          break;
        case "down":
          alert('下滑')
          console.log("下滑");
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style>
</style>